<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        window.onload=function(){
            //1.定义组件
            var student={
                template:`
                    <div>
                        <h1>student-list页面</h1>   
                    </div>
                `
            };
            var teacher={
                template:`
                    <div>
                        <h1>teacher-list页面</h1>
                        <router-link to='/a'>跳转到a页面</router-link>
                        <router-link to='/b'>跳转到b页面</router-link>
                        <div>
                            <router-view></router-view> 
                        </div> 
                    </div>
                `
            };
            var user={
                template:`
                    <div>
                        <h1>user-list页面</h1>   
                    </div>
                `
            };
            var a={
                template:`
                    <div>
                        <h3>a-list页面</h3>   
                    </div>
                `
            };
            var b={
                template:`
                    <div>
                        <h3>b-list页面</h3>   
                    </div>
                `
            }
            //2.定义路由
                var router=new VueRouter({
                     routes:[{
                        path:'/student',
                        name:"student-a",
                        component:student,
                        // redirect:'/teacher',
                        alias:'/c'
                    },{
                        path:'/teacher',
                        name:"teacher-a",
                        component:teacher ,
                        children:[{
                            path:'/a',
                            component:a
                        },{
                            path:'/b',
                            component:b
                        }]
                    },{
                        name:"user-a",
                        path:'/user',
                        component:user
                    }]
                });
            //3.挂载路由
            new Vue({
                el:'#app',
                data:{
                    student:{path:"/c"}
                },
                router
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h1>vue-router页面</h1>
        <router-link :to='student'>跳转到student页面</router-link>
        <router-link :to='{path:"/teacher",query:{id:9}}'>跳转到teacher页面</router-link>
        <!-- <router-link to='/user'>跳转到user页面</router-link> -->
        <router-link :to='{name:"user-a",params:{id:10}}'>跳转到user页面10</router-link>
        <router-link :to='{name:"user-a",params:{id:20}}'>跳转到user页面20</router-link>
        <div id="content">
            <router-view></router-view>
        </div>
    </div>
</body>
</html>